import { getMenuTableApi } from '@/api/system/menu/menu'
import { MenuListParam } from '@/api/system/menu/MenuModel'
import { StatusCode } from '@/http/request'
import { onMounted, reactive, nextTick, ref } from 'vue'

export default function useMenuTable() {
    const refreshTable = ref(true)
    // 表格树是否展开
    const tableExpandAll = ref(false)

    // 定义列表查询的参数
    const listParam = reactive<MenuListParam>({
        title: '',
        status: '1'
    })
    // 表格的高度
    const tableHeight = ref(0)
    // 表格数据
    const menuTable = reactive({
        list: []
    })
    // 获取表格数据
    const getMenuTable = async () => {
        let res = await getMenuTableApi(listParam)
        if (res && res.code == StatusCode.Success) {
            console.log('菜单列表：', res)
            menuTable.list = res.data
        }
    }

    // 搜索
    const searchBtn = () => {
        getMenuTable()
    }
    // 重置
    const resetBtn = () => {
        listParam.title = ''
        listParam.status = '1'
        getMenuTable()
    }

    const tableExpand = () => {
        refreshTable.value = false
        tableExpandAll.value = !tableExpandAll.value
        nextTick(() => {
            refreshTable.value = true
        })
    }

    // 首次加载
    onMounted(() => {
        getMenuTable()
        nextTick(() => {
            tableHeight.value = window.innerHeight - 180
        })
    })

    return {
        refreshTable,
        tableExpandAll,
        listParam,
        resetBtn,
        searchBtn,
        tableHeight,
        menuTable,
        getMenuTable,
        tableExpand
    }
}
